import * as React from 'react'
import _ from 'lodash'
import {Row as AntdRow, Pagination, Table as AntdTable} from 'antd'
import {renderItems, VJsonComponent, render, VJsonComponentBase,} from "../factory"
import {PageHeader, Row, Col, Button,Drawer} from "antd"
import '../css/page.css'
import {toJS} from "mobx";

export interface PageT1VJsonProp {
    /**
     * 标题
     */
    title?: string;

    /**
     * 内容元素
     */
    table: any[]

    /**
     * 浮动查询表单
     */
    queryForm: any[]
    /**
     * 浮动查询表单是否显示
     */
    formShow:boolean
    drawerTop:string
}

export interface PageT1State {

}

@VJsonComponent({
    view: 'pageT1'
})
export default class PageT1 extends VJsonComponentBase<PageT1VJsonProp, PageT1State> {
    state: any = {
        formShow:false,
        drawerTop:''
    }
    static defaultProps = {
        title: ''
    };

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            PageT1.defaultProps
        )
    }

    debugToolClick = () => {//数据
        const scope = this.props.$context.scopeInstance
        //@ts-ignore
        window.debugTool.openDebug(scope)
    }

    tableSearch=()=>{//数据查询
        if(this.state.formShow){
            this.setState({
                formShow:false
            })
        }else{
            this.setState({
                formShow:true
            })
        }
    }
    closeForm=(e:any)=>{//关闭
        setTimeout(() => {
            this.setState({
                formShow:false
            })
        },100) 
    }
    uncloseForm=(e:any)=>{
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    render(): any {
        return (
            //@ts-ignore
            <div className="page-wrap single-table" key={this.key} view_id={this.key} aria-roledescription={this.view}>
                <div className="page-wrap-header">
                    {
                        (!!this.props.vjson.title) ? <PageHeader title={this.props.vjson.title}/> : null
                    }
                    <div className="page-wrap-header-right">
                        {
                            (_.has(window, 'debugTool') ? <Button onClick={this.debugToolClick}>调试</Button> : null)
                        }
                        <Button onClick={this.tableSearch}>查询</Button>
                        <Button>编辑</Button>
                        <Button>删除</Button>
                        <Button>筛选</Button>
                        <Button>关闭</Button>
                    </div>
                </div>
                <div className="page-wrap-body">
                    {
                        (this.state.formShow)?<div className="single-table-form-wrap" onClick={this.closeForm}><div className="single-table-form" onClick={this.uncloseForm}>
                        {
                            render(this, toJS(this.props.vjson.queryForm))
                        }
                        </div></div>:null
                    }
                    <AntdTable
                        columns={columns}
                        dataSource={data}
                        rowKey='key'
                        scroll={{x: 1500, y:'calc(100vh - 333px)'}}
                        pagination={false}
                    />
                    <Pagination defaultCurrent={6} total={500}/>
                </div>
            </div>
        );
    }
}
//y:'calc(100vh)'
const columns: any = [
    {
        title: 'Full Name',
        width: 100,
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
    },
    {
        title: 'Age',
        width: 100,
        dataIndex: 'age',
        key: 'age',
        fixed: 'left',
    },
    {
        title: 'Column 1',
        dataIndex: 'address',
        key: '1',
        width: 150,
    },
    {
        title: 'Column 2',
        dataIndex: 'address',
        key: '2',
        width: 150,
    },
    {
        title: 'Column 3',
        dataIndex: 'address',
        key: '3',
        width: 150,
    },
    {
        title: 'Column 4',
        dataIndex: 'address',
        key: '4',
        width: 150,
    },
    {
        title: 'Column 5',
        dataIndex: 'address',
        key: '5',
        width: 150,
    },
    {
        title: 'Column 6',
        dataIndex: 'address',
        key: '6',
        width: 150,
    },
    {
        title: 'Column 7',
        dataIndex: 'address',
        key: '7',
        width: 150,
    },
    {title: 'Column 8', dataIndex: 'address', key: '8'},
    {
        title: 'Action',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: () => <a>action</a>,
    },
];

const data: any[] = [];
for (let i = 0; i < 10; i++) {
    data.push({
        key: i,
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
    });
}
